<template>
  <div class="app-container">
    <el-card :body-style="{ 'padding-left': '40px' }">
      <el-form ref="queryForm" :model="form" label-position="top" label-width="100px" label-suffix=":" :rules="rules">
        <dk-form :form-input="formList" :span-num="1" :rule-form="form" />
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px" :body-style="[{ 'padding-left': '40px' }]">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </el-card>
  </div>
</template>
<script>
// 接口api：first step
import {
  addOrderGoodsEvaluate,
  editOrderGoodsEvaluate,
  getOrderGoodsEvaluateInfo
} from "@/api/list/order/order-evaluate-list.js";

export default {
  data() {
    return {
      loading: false,
      // 表单对象：two step
      form: {
        evaluateImg: [],
        starLevel: "",
        videoUrl: "",
        content: "",
        userNickName: "",
        avatar: "",
        sourceType: 1,
        goodsId: undefined,
        uuid: undefined,
      },
      // 表单配置项：three step
      formList: [
        {
          label: "用户昵称",
          placeholder: "请输入",
          type: "input",
          name: "userNickName",
          prop: "userNickName",
          maxlength: 10,
        },
        {
          label: "星级",
          placeholder: "请输入",
          type: "select",
          name: "starLevel",
          prop: "starLevel",
          list: [
            {
              name: "星级1",
              value: 1,
            },
            {
              name: "星级2",
              value: 2,
            },
            {
              name: "星级3",
              value: 3,
            },
            {
              name: "星级4",
              value: 4,
            },
            {
              name: "星级5",
              value: 5,
            },
          ],
          maxlength: 10,
        },
        {
          label: "用户头像",
          placeholder: "请上传",
          type: "imageUpload",
          name: "avatar",
          prop: "avatar",
          limit: 1,
          tipsText: "可上传1张图片，建议尺寸64*64px，大小不能超过800kb",
        },
        {
          label: "评价图片",
          placeholder: "请上传",
          type: "imageUpload",
          name: "evaluateImg",
          prop: "evaluateImg",
          limit: 5,
          tipsText: "可上传5张图片，建议尺寸64*64px，大小不能超过800kb",
        },
        {
          label: "视频",
          placeholder: "请上传",
          type: "videoUpload",
          name: "videoUrl",
          prop: "videoUrl",
          limit: 1,
          tipsText: "可上传mp4格式，建议尺寸1:1，大小建议不能超过10M",
        },
        {
          label: "评价内容",
          placeholder: "请输入内容",
          type: "textarea",
          name: "content",
          prop: "content",
          maxlength: 100,
        },
      ],
      // 校验对象：four step
      rules: {
        // 最多允许输入10个汉字
        userNickName: [
          { required: true, message: "请输入用户昵称", trigger: "change" },
          { max: 10, message: "最多允许输入10个汉字", trigger: "change" },
        ],
        starLevel: [
          { required: true, message: "请输入星级", trigger: "change" },
        ],
        avatar: [
          { required: true, message: "请上传用户头像", trigger: "change" },
        ],
        evaluateImg: [
          { required: true, message: "请上传评价图片", trigger: "change" },
        ],
        // videoUrl: [
        //   { required: true, message: "请上传视频", trigger: "change" },
        // ],
        content: [
          { required: true, message: "请输入评价内容", trigger: "change" },
        ],

      },
      // 接口存储对象：five step
      interfaceObj: {
        detApiName: getOrderGoodsEvaluateInfo,
        addApiName: addOrderGoodsEvaluate,
        editApiName: editOrderGoodsEvaluate,
      }
    };
  },
  created() {
    const { uuid = "" } = this.$route.params;
    const { goodsId = "" } = this.$route.query;
    console.log(uuid, 'uuid', goodsId, 'id')
    if (goodsId) {
      this.form.goodsId = goodsId;
    }
    if (uuid) {
      this.form.orderId = uuid;
      this.loading = true;
      this.$nextTick(() => {
        this.network().getDetail();
      });
    }

  },
  methods: {
    cancel() {
      this.$router.go(-1);
    },
    submit() {
      const throttleStatus = this.throttle(); // 节流
      if (!throttleStatus) return;
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          if (this.form.orderId !== undefined) {
            this.network().editForm()
          } else {
            this.network().addForm()
          }
        }
      });
    },
    network() {
      return {
        // 详情
        getDetail: async () => {
          const { detApiName } = this.interfaceObj
          const { data } = await detApiName({
            orderId: this.form.orderId,
          });
          if (data) {
            Object.assign(this.form, data, {
              evaluateImg: typeof data.evaluateImg === 'string'
                ? data.evaluateImg.split(',') : []
            });
          }
          this.loading = false;
        },
        // 新增
        addForm: async () => {
          const obj = {
            ...this.form,
            createBy: this.$store.state.user.name,
            evaluateImg: this.form.evaluateImg.join(','),
          };
          const { addApiName } = this.interfaceObj
          const { code } = await addApiName(obj);
          if (code === 0) {
            this.$modal.msgSuccess("新增成功");
            this.resetForm("queryForm");
            this.$router.go(-1);
          }
        },
        // 编辑
        editForm: async () => {
          const obj = {
            ...this.form,
            updateBy: this.$store.state.user.name,
            evaluateImg: this.form.evaluateImg.join(','),

          };
          const { editApiName } = this.interfaceObj
          const { code } = await editApiName(obj);
          if (code === 0) {
            this.$modal.msgSuccess("编辑成功");
            this.resetForm("queryForm");
            this.$router.go(-1);
          }
        },
      };
    },
  },
};

</script>